<!DOCTYPE html>
<html lang="en">
<head>
   
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PWA - serviceWorker</title>
    <script src="js/rem.js"></script>
    <script src="js/border1px.js"></script>
    <link rel="stylesheet" href="css/normalize.css">
    <style>
       .tarbar {
           width:7.5rem;
           height:0.92rem;
           box-shadow: 0 0 0.2rem 0 hsl(0deg 6% 58% / 60%);
           position: fixed;
           bottom:0;
           display: flex;
           justify-content: space-between;
           
       }
       .box {
           width:7.5rem;
           height:2rem;
           background: pink;
           color:white;
       }

    </style>
</head>
<body>
    <!-- 显示点东西 begin -->
    <div class="box">
        首页
    </div>
    <!-- 显示点东西 end -->
    <!-- tarbar begin -->
    <div class="tarbar">
        <div class="tarbar-item active">
            <a href="#">
                <img src="imgs/jd/tarbar-item1.png" />
            </a>
        </div>
        <div class="tarbar-item">
            <a href="/lession7-3-2.html">
                <img src="imgs/jd/tarbar-item2.png" />
            </a>
        </div>
        <div class="tarbar-item">
            <img src="imgs/jd/tarbar-item3.png" />
        </div>
        <div class="tarbar-item">
            <img src="imgs/jd/tarbar-item4.png" />
        </div>
        <div class="tarbar-item">
            <img src="imgs/jd/tarbar-item5.png" />
        </div>
    </div>
    <!-- tarbar end -->
    <script>
            /* 判断当前浏览器是否支持serviceWorker */
    if ('serviceWorker' in navigator) {
        /* 当页面加载完成就创建一个serviceWorker */
        
        window.addEventListener('load', function () {
            /* 创建并指定对应的执行内容 */
            /* scope 参数是可选的，
            可以用来指定你想让 service worker 
            控制的内容的子目录。 
            在这个例子里，我们指定了 '/'，表示 根网域下的所有内
            容。这也是默认值。 
            */
            navigator.serviceWorker.register('./serviceWorker.js', {scope: './'})
                .then(function (registration) {
                    console.log(
                        'ServiceWorker registration successful with scope: ', 
                        registration.scope
                    );
                })
                .catch(function (err) {
                    console.log(
                        'ServiceWorker registration failed: ',
                        err
                    );
                });
        });
     
    }
    </script>
</body>
</html>